<!-- global-logo/index.vue -->
<template>
    <router-link 
      to="/dashboard" 
      class="global-logo"
      :class="logoClasses"
      :style="logoStyles"
    >
      <!-- 🎯 Logo图标 -->
      <div class="logo-icon">
        <img 
          v-if="logoImage" 
          :src="logoImage" 
          :alt="systemTitle"
          class="logo-image"
        />
        <!-- 如果没有图片，使用文字Logo -->
        <div v-else class="logo-text-icon">{{ logoText }}</div>
      </div>
      
      <!-- 🎯 系统标题 -->
      <h2 
        v-if="showTitle" 
        class="logo-title"
        :class="titleClasses"
      >
        {{ systemTitle }}
      </h2>
    </router-link>
  </template>
  
  <script setup>
  import { computed } from 'vue'
  import { useTheme } from '@/composables/useTheme.js'
  import { useDevice } from '@/composables/useDevice.js'
  
  // 🎯 Props
  const props = defineProps({
    showTitle: {
      type: Boolean,
      default: true
    },
    logoImage: {
      type: String,
      default: '/vite.svg'  // 默认使用 Vite logo
    },
    systemTitle: {
      type: String,
      default: 'Vilan Admin'
    },
    height: {
      type: Number,
      default: 56
    }
  })
  
  // 🎯 Composables
  const { isDark } = useTheme()
  const { isMobile } = useDevice()
  
  // 🎯 计算属性
  
  // Logo文字（当没有图片时使用）
  const logoText = computed(() => {
    return props.systemTitle.charAt(0).toUpperCase()
  })
  
  // Logo样式类
  const logoClasses = computed(() => [
    'logo-container',
    {
      'logo-dark': isDark.value,
      'logo-mobile': isMobile.value,
      'logo-title-hidden': !props.showTitle
    }
  ])
  
  // Logo样式
  const logoStyles = computed(() => ({
    height: `${props.height}px`
  }))
  
  // 标题样式类
  const titleClasses = computed(() => [
    'title-text',
    {
      'title-hidden': !props.showTitle,
      'title-mobile-hidden': isMobile.value && !props.showTitle
    }
  ])
  </script>
  
  <style lang="scss" scoped>
  .global-logo {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 16px;
    text-decoration: none;
    color: inherit;
    transition: all 0.3s;
    border-radius: 6px;
    
    &:hover {
      background: var(--el-color-primary-light-9);
      
      .logo-title {
        color: var(--el-color-primary);
      }
    }
    
    // 🎯 Logo图标区域
    .logo-icon {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      
      .logo-image {
        width: 32px;
        height: 32px;
        object-fit: contain;
      }
      
      .logo-text-icon {
        width: 32px;
        height: 32px;
        background: var(--el-color-primary);
        color: white;
        border-radius: 6px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 16px;
        font-weight: 600;
      }
    }
    
    // 🎯 系统标题
    .logo-title {
      font-size: 18px;
      font-weight: 600;
      color: var(--el-color-primary);
      margin: 0;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      transition: all 0.3s;
      
      &.title-hidden {
        width: 0;
        opacity: 0;
        overflow: hidden;
      }
    }
    
    // 🎯 移动端适配
    &.logo-mobile {
      padding: 0 12px;
      gap: 8px;
      
      .logo-icon {
        .logo-image,
        .logo-text-icon {
          width: 28px;
          height: 28px;
        }
      }
      
      .logo-title {
        font-size: 16px;
      }
      
      &.logo-title-hidden .logo-title {
        display: none;
      }
    }
    
    // 🎯 深色模式适配
    &.logo-dark {
      .logo-title {
        color: var(--el-color-primary-light-3);
      }
      
      &:hover .logo-title {
        color: var(--el-color-primary);
      }
    }
  }
  </style>